<template>
    <div>
        <Sresulttop/>
        <ul class="Srnav">
            <template v-for="(item,index) in arr">
                <li  :key="index" v-if="index==0||index>1" @click="change(index)">
                {{item}}
                </li>
                <li :key="index" v-if="index==1" @click="change(index)">
                {{item}}
                <i class="Srup"></i>
                <i class="Srup Srunder"></i>
            </li>
            </template>
            
            
        </ul>
        <ul>
            <li class="Srcontent">
                <img class="Srimg" src="../../assets/user/lipstick1.png" alt="">
                <div>
                    <p class="Srtitle">焕彩萃璨花蕊唇彩4.8g</p>
                    <p class="Srcenter">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
                    <div class="Srbottom">
                        <div class="Srbleft">
                            <img src="../../assets/user/flag.png" alt="">
                            <p class="Srbleftone">海外直邮</p>
                        </div>
                        <p class="Srbright">￥166.06</p>
                    </div>
                </div>
            </li>
            <li class="Srcontent">
                <img class="Srimg" src="../../assets/user/lipstick1.png" alt="">
                <div>
                    <p class="Srtitle">焕彩萃璨花蕊唇彩4.8g</p>
                    <p class="Srcenter">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
                    <div class="Srbottom">
                        <div class="Srbleft">
                            <img src="../../assets/user/flag.png" alt="">
                            <p class="Srbleftone">海外直邮</p>
                        </div>
                        <p class="Srbright">￥166.06</p>
                    </div>
                </div>
            </li>
            <li class="Srcontent">
                <img class="Srimg" src="../../assets/user/lipstick1.png" alt="">
                <div>
                    <p class="Srtitle">焕彩萃璨花蕊唇彩4.8g</p>
                    <p class="Srcenter">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
                    <div class="Srbottom">
                        <div class="Srbleft">
                            <img src="../../assets/user/flag.png" alt="">
                            <p class="Srbleftone">海外直邮</p>
                        </div>
                        <p class="Srbright">￥166.06</p>
                    </div>
                </div>
            </li>
            <li class="Srcontent">
                <img class="Srimg" src="../../assets/user/lipstick1.png" alt="">
                <div>
                    <p class="Srtitle">焕彩萃璨花蕊唇彩4.8g</p>
                    <p class="Srcenter">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
                    <div class="Srbottom">
                        <div class="Srbleft">
                            <img src="../../assets/user/flag.png" alt="">
                            <p class="Srbleftone">海外直邮</p>
                        </div>
                        <p class="Srbright">￥166.06</p>
                    </div>
                </div>
            </li>
            <img class="Srbimg" src="../../assets/user/轮播图.png" alt="">
        </ul>
        <p class="Srload">加载更多</p>
    </div>
</template>

<script>
import Sresulttop from '../ma/Sresulttop'
export default {
    name:'Sresult',
    components:{
        Sresulttop
    },
    methods:{
        change(v){
           console.log(v);
           var lis = document.getElementsByTagName('ul')[0].children;
           for (let i = 0; i < lis.length; i++) {
               lis[i].className = '';
           }
           lis[v].className = 'active';
        }
    },
    data(){
        return{
            arr:['默认','价格','销量','筛选']
        }
    },
    mounted(){
        var lis = document.getElementsByTagName('ul')[0].children;
        lis[0].className = 'active';
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    color: #4d4d4d;
    font-size: 2.4rem;
}
.Srnav {
    margin-top: 9.6rem;
    display: flex;
    justify-content: space-around;
    background: #fff;
    font-size: 2.8rem;
    height: 7.9rem;
    border-bottom: 0.1rem solid #ccc;
    line-height: 7.9rem;
    position: relative;
}
.Srup {
    border: 0.7rem solid #4d4d4d;
    display: inline-block;
    transform: rotate(45deg);
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 3rem;
    left: 33rem;
}
.Srunder {
    transform: rotate(-135deg);
    top: 3.7rem;
} 
.Srcontent {
    height: 15.1rem;
    background: #fff;
    border-bottom: 0.1rem solid #ccc;
    margin-bottom: 1.9rem;
    padding: 2.8rem 2rem 2.1rem 2rem;
    text-align: left;
    display: flex;
}
.Srimg {
    margin: 0 7.6rem 0 5.5rem;
}
.Srtitle {
    font-size: 3rem;
    color: #494949;
    margin-bottom: 1.2rem;
}
.Srcenter {
    line-height: 3rem;
}
.Srbottom {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.Srbleft {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Srbleftone {
    padding-left: 6rem;
    padding-top: 0.2rem;
    background: url(../../assets/user/g-che-fei.png) no-repeat -5rem 0;
}
.Srbright {
    font-size: 3rem;
    color: #e53e42;
}
.Srbimg {
    width: 100%;
}
.Srload {
    height: 7.3rem;
    line-height: 7.3rem;
    color: #808080;
}
.active {
    color: #e53e42;
}
</style>